<template>
	<view>
		<view class="">
			请选择图片上传
		</view>
		<view class="picList">
			<view v-for="pic in imageList">
				<image :src="pic" class="showPic" mode=""></image>
				<image @click="deletePic(index)" class="deletelcon" src="/static/image/delete.png"></image>
			</view>
		</view>

		<view class="chooseImage" @click="chooseImage">
			<view class="pulsIcon">
				+
			</view>
			<view class="greyText">
				还可上传{{9-imageList.length}}张
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: "",
				imageList: []
			}
		},
		methods: {
			chooseImage() {
				const self = this;
				uni.chooseImage({
					count: 9,
					sizeType: ['orginal', 'compressed'],
					sourceType: ['album'],
					success: function(result) {
						self.imageList = result.tempFilePaths
					}
				});
				},
				deletePic(index) {
					// console.log("删除索引为"+index+"的图片")
					this.imageList.splice(index, 1)
				}
			}
		}
</script>

<style lang="less">
	.image {
		width: 150rpx;
		height: 150rpx;
	}

	.picList {
		display: flex;
		flex-direction: row;

		.showPic {
			display: flex;
			width: 150rpx;
			height: 150rpx;
		}
		
		.deletelcon{
			width: 50rpx;
			height: 50rpx;
			position: relative;
			top: -160rpx;
		}
	}

	.chooseImage {
		width: 150rpx;
		height: 150rpx;
		background-color: lightgray;
		text-align: center;

		.plusIcon {
			padding-left: 50rpx;
			padding-top: 30rpx;
			text-align: center;
			width: 50rpx;
			height: 50rpx;
		}

		.greyText {
			font-size: 25rpx;
		}
	}
</style>
